<template>
    <el-main>
        <!-- 用户信息列表 -->
        <el-table @row-click="clickRow" id="out-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange"
            v-loading="loading" border>
            <el-table-column prop="id" label="单据号" width="100">
            </el-table-column>
            <el-table-column prop="serialNumber" label="流水号" width="100">
            </el-table-column>
            <el-table-column prop="assetType" label="资产类型" width="50">
            </el-table-column>
            <el-table-column prop="assetTag" label="资产名" width="150">
            </el-table-column>
            <el-table-column prop="applicant" label="申请人">
            </el-table-column>
            <el-table-column prop="applyTime" label="申请日期" width="180">
            </el-table-column>
            <el-table-column prop="returnTime" label="归还日期 " width="180">
            </el-table-column>
            <el-table-column prop="applyState" label="状态">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="80">
                <template slot-scope="scope" >
                    <!-- <el-button @click="showDialog('报修')" type="danger" size="mini">删除</el-button> -->
                    <el-button  v-if="canOperation(scope.row.applyState)" @click="showDialog('审核')" type="primary" size="mini">审核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="paginations.current_page"
            :page-sizes="paginations.page_sizess" :page-size="paginations.page_size" :layout="paginations.layout"
            :total="tableData.length">
        </el-pagination>

        <!-- 归还弹出框 -->
        <el-dialog title="审核申请" :visible.sync="dia_visiable_claim" width="30%">
            <span>你是否同意该申请？</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="checkCalim('审核失败')">拒 绝</el-button>
                <el-button type="danger" @click="checkCalim('审核通过')">通 过</el-button>
            </span>
        </el-dialog>
    </el-main>
</template>

<script>
  import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    import axios from 'axios'
    import exportExcel from '@/utils/excel'

export default {
  name: "User",
  data() {
    return {
      multipleSelection: [],
      paginations: {
        total: 0,
        current_page: 1,
        page_sizes: [10, 20, 30, 40],
        page_size: 10,
        layout: "total, sizes, prev, pager, next, jumper"
      },
      userName: "admin",
      tableData: [], //表格数据
      assetTags: [], //资产名数据
      rowData: {}, //行数据
      dia_visiable_claim: false,
      formLabelWidth: "120px",
      loading: false,
      dialogTitle: "",
      input:""
    };
  },
  methods: {
    clickRow(row) {
      this.rowData = row;
    },
    showDialog(dialogName) {
      if (dialogName === "审核") {
        this.dia_visiable_claim = true;
      } 
    },
    // 审核
    checkCalim(result) {
      axios({
        method: "post",
        url: global.url + "/access/checkClaim",
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        params: {
          id: this.rowData.id,
          checkResult:result
        }
      })
        .then(res => {
          this.loading = false;
          let data = res.data;
          if (data.code === 2000) {
            this.dia_accessVisitable = false;
            this.$message({
              message: "成功",
              type: "success"
            });
            this.reloadPage();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // search
    handleSearch() {
      this.$message("test");
    },
    //设置数据
    setData() {
      this.loading = true;
      axios({
        method: "get",
        url: global.url + "/access",
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        }
      })
        .then(res => {
          this.loading = false;
          let data = res.data;
          if (data.code === 2000) {
            this.tableData = data.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    reloadPage() {
      this.setData();
      this.dia_visiable_claim  = false;
    },
    canOperation(state) {
      if (state === "审核中") {
        return true;
      } else {
        return false;
      }
    }
  },
  mounted() {
    this.setData();
  }
};
</script>

<style scoped>

</style>